<template>
  <div>
    <!--  -->
    <el-row>
      <el-col :span="19">
        <div class="grid-content bg-purple" style="padding-bottom:10px">
          <el-button type="success" @click="$router.push('/Attendance/Edit')" icon="el-icon-circle-plus" size="mini">新增
          </el-button>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="grid-content bg-purple">
          <el-input size="mini" v-model="Description" placeholder="输入关键字搜索">
            <el-button slot="append" @click="FNameSelectAttendanceList" icon="el-icon-search"></el-button>
          </el-input>
        </div>
      </el-col>
    </el-row>
    <!-- 数据展示 -->
    <el-table :data="tableDate.AttendanceList" height="500">
      <el-table-column prop="pk_Attendance" label="ID"></el-table-column>
      <el-table-column prop="TypeName_CHS" label="类型"></el-table-column>
      <el-table-column label="时间" width="200">
        <template slot-scope="scope">
          <span>{{scope.row.CreateDate|TimeFilter}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="IPAddress" label="IP" width="120"></el-table-column>
      <el-table-column prop="Description" label="备注" width="220"></el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <el-tag effect="dark" size="small" :style="'border-color:'+scope.row.Visual" :color="scope.row.Visual">
            {{scope.row.StatusName_CHS}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" min-width="180" align="center">
        <template slot-scope="scope">
          <el-button type="primary" @click="Edit(scope.row.pk_Attendance)" size="mini" icon="el-icon-edit">修改
          </el-button>
          &nbsp;
          <el-popconfirm @onConfirm="Del(scope.$index,scope.row.pk_Attendance)" title="确定删除此信息">
            <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini">删除
            </el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="foot_page">
      <el-pagination background layout="prev, pager, next" @current-change="GetDt" :total="tableDate.Count"
        :current-page.sync="page" :page-size="8"></el-pagination>
    </div>
  </div>
</template>


<style lang="scss" scoped>
.List_Div2_text {
  height: 28px;
  width: 75%;
  border: 1px solid #ccc;
  padding-left: 8px;
}
.foot_page {
  padding: 5px;
  text-align: center;
}
</style>

<script>
export default {
  data () {
    return {
      Description: '',
      tableDate: {
      },
      page: 1,
      dialogFormVisible: false,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      }
    }
  },
  methods: {
    GetDt () {
      this.$axios({
        url: '/HrApi/Attendance/GetAttendanceList',
        method: 'GET',
        params: {
          page: this.page,
          limit: 8
        },
      }).then(res => {
        this.tableDate = res.data.data;
      })
    },
    //删除 
    Del (index, pk_Attendance) {
      this.$axios({
        url: "/HrApi/Attendance/DelAttendancedata",
        method: "POST",
        data: this.$Qs.stringify({
          pk_Attendance
        })
      }).then(res => {
        if (!res.data.code) {
          this.$message.success(res.data.msg)
          //在集合中删除此行
          this.GetDt();
          //this.tableDate.splice(index, 1)
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
    Edit (id) {
      //编辑
      this.$router.push({
        path: "/Attendance/Edit",
        query: {
          pk_Attendance: id
        }
      })
    },
    //根据FullName搜索
    FNameSelectAttendanceList () {
      this.page = 1
      if (this.Description.length != 0) {
        this.$axios({
          url: '/HrApi/Attendance/FNameSelectAttendanceList',
          method: 'GET',
          params: {
            page: this.page,
            limit: 8,
            Description: this.Description
          }
        }).then(res => {
          this.tableDate = res.data.data;
        })
      }
      else {
        this.GetDt();
      }
    }
  },
  filters: {
    TimeFilter (t) {
      if (t === null) {
        return '无'
      }
      let dt = t.split('T').join(' ')
      if (dt.split('.').length > 1) {
        dt = dt.split('.')[0]
      }
      return dt
    }
  },
  mounted () {
    this.GetDt();
  },

}
</script>